<template>
	<div class="back_contain_n">
		<!-- 头部搜索 -->
		<div class="Search_Top_Part">
			<div class="search_list">
				<div>
<!--					<div class="input_flex">-->
<!--						<el-select clearable v-model="queryForm.storageOutType" placeholder="出库类型">-->
<!--							<el-option label="领用" value="1"></el-option>-->
<!--							<el-option label="报废" value="2"></el-option>-->
<!--						</el-select>-->
<!--					</div>-->
					<div class="input_flex">
						<el-input clearable v-model="queryForm.storageOutCode" placeholder="出库号"></el-input>
					</div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.processName" placeholder="大类">
							<el-option :label="value.name" :value="value.name" v-for="(value,key) in itemListMap"
									   :key="key"></el-option>
						</el-select>
					</div>
					<div class="input_flex">
						<el-input clearable v-model="queryForm.storageOutUser" placeholder="领用人"></el-input>
					</div>
					<div class="input_flex">
						<el-select clearable v-model="queryForm.status" placeholder="状态">
							<el-option label="出库" value="1"></el-option>
						</el-select>
					</div>
					<div class="input_flex daterange">
						<el-date-picker v-model="time" type="daterange"
										range-separator="-"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
			</div>
			<div class="search_bt">
				<span class="zll-search" @click="getList">搜索</span>
				<span class="zll-search-reset" @click="searchReset()">重置</span>
			</div>
		</div>
		<div class="Search_Top_Input">
			<div class="addNew">
				<span @click="edit({storageOutStatus:'1'},'add')" v-if="hasRole('') ">立即出库</span>
			</div>
		</div>
		<!-- table -->
		<sys-table class="m_table"
				   ref="systable"
				   :isMultipleSelection="false"
				   :tableData="tableData"
				   :tableLoading="tableLoading"
				   :tableHeader="tableHeader"
				   :scopeWidth="120"
				   :backCount="backCount"
				   @getBackData="getList"
		>
			<template slot-scope="scope" slot="operate">
				<el-button @click="edit(scope.row,'see')" type="text" size="small">查看</el-button>
			</template>
		</sys-table>
		<div class="zll-dialog">
			<popout title="领用出库记录" :visible.sync="addDialog" v-if="addDialog" class="bg_Size">
				<add ref="add" slot="content" :editData="editData" :type="type" @refreshPage="refreshPage"></add>
				<template slot="bottom">
					<p class="zll-botton Info" @click="addDialog = false">关 闭</p>
					<p class="zll-botton" v-if="type == 'add'" @click="()=>{this.$refs.add.submitForm()}">出 库</p>
				</template>
			</popout>
		</div>
	</div>
</template>

<script>
	import Add from './add.vue'
	import {formatDate} from "@/plugins/formatDate";

	export default {
		data() {
			return {
				tableLoading: true, //table刷新
				type: '',
				editData: {},

				queryForm: {
					storageOutUser: '',
					status: '',
					storageOutType: '',
					storageOutCode: '',
					processName: '',
				},
				backCount: 0,
				tableData: [],
				tableHeader: [],
				addDialog: false,
				time: [],

				itemListMap: {},
			}
		},
		methods: {

			edit(val, type) {
				let self = this;
				self.addDialog = true;
				self.type = type;
				self.$nextTick(() => {
					self.editData = Object.assign({}, val);
				});
			},

			getSysItemList() {
				let self = this;
				self.itemListMap = {};
				self.$http({
					url: "/jinl/sysItem/getMgItemSelect",
					method: "post",
					data: JSON.stringify({types: ['1']}),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						let itemListMap = {};
						for (let data of resp.result) {
							if (itemListMap[data.itemName]) {
								itemListMap[data.itemName].children.push({id: data.id, name: data.itemAlias})
							} else {
								let obj = {name: data.itemName, children: [{id: data.id, name: data.itemAlias}]}
								itemListMap[data.itemName] = obj;
							}
						}
						self.itemListMap = itemListMap;
					}
				});
			},

			getList(startIndex, pageRow) {
				let self = this;
				if (this.time && this.time.length == 2) {
					//date类型
					self.queryForm.startTime = formatDate(new Date(self.time[0]), 'yyyy-MM-dd')
					self.queryForm.endTime = formatDate(new Date(self.time[1]), 'yyyy-MM-dd') + ' 23:59:59'
				} else {
					self.$message.warning('请选择时间！');
					return;
				}
				if((new Date(self.time[1]).getTime() - new Date(self.time[0]).getTime())> 3*31*24*3600*1000){
					self.$message.warning('最多选择近3个月数据！');
					return;
				}
				let pageInfo = self.$refs.systable.getPageInfo(startIndex);
				if (pageInfo.pageNum == 0 || startIndex == 0) {
					self.$refs.systable.resetPage();
				}
				self.queryForm.startIndex = pageInfo.pageNum;
				self.queryForm.totalPage = pageInfo.pageSize;
				let param = Object.assign({}, self.queryForm);
				self.tableLoading = true;
				self.$http({
					url: "/jinl/procureStorageOut/getProcureStorageList",
					method: "post",
					data: JSON.stringify(param),
					dataType: 'json',
					contentType: "application/json",
				}).then(resp => {
					if (resp.success) {
						self.tableLoading = false;
						self.tableData = resp.result;
						self.tableHeader = [
							{"columnValue": "storageOutTypeCn", "columnName": "出库类型"},
							{"columnValue": "storageOutCode", "columnName": "出库号"},
							{"columnValue": "processName", "columnName": "大类"},
							{"columnValue": "materialSize", "columnName": "物料数量"},
							{"columnValue": "takeUser", "columnName": "领用人"},
							{"columnValue": "storageOutStatusCn", "columnName": "状态"},
							{"columnValue": "storageOutTime", "columnName": "出库日期"},
							{"columnValue": "storageOutUser", "columnName": "出库人"},
						];
						if (resp.result.length > 0) {
							self.backCount = resp.result[0].count;
						} else {
							self.backCount = 0;
						}
					}
				});

			},


			searchReset() { //重置搜索
				this.queryForm = {
					storageOutUser: '',
					status: '',
					storageOutType: '',
					storageOutCode: '',
					processName: '',
				};
				this.getList();
			},

			refreshPage() {
				let self = this;
				self.addDialog = false;
				self.getList()
			}
		},
		mounted() {
			let self = this;
			self.getSysItemList()
			self.getList()
			self.$eventBus.$on("updateStorageOutList", function () {
				self.addDialog = false;
				self.getList()
			})
		},

		created(){
			let self = this;
			self.time[1] = formatDate(new Date(), 'yyyy-MM-dd');
			let timestamp = new Date().getTime()- 30*24*3600*1000;
			self.time[0] = formatDate(new Date(timestamp), 'yyyy-MM-dd');
		},
		components: {Add},
	}
</script>

<style lang="scss" scoped>
	@import "@/style/SearchTop.scss";
</style>